<template>
	<view class="bosss">

		<!-- <video autoplay="true" :style="{'height':screenHeight}" id="myVideo" class="visty" :src="judizhi"
			@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video> -->
		<!-- <x-video :style="{'height':screenHeight}" ref="videoPlayer" videoId="myVideo" :src="judizhi" :progress="progress" @play="videoPlay"
			@pause="videoPause" @ended="videoEnded" @timeupdate="videoTimeUp" @loadeddata="videoLoaded"
			@seeking="videoSeeking" @seeked="videoSeeked" @error="videoError" /> -->
		<!-- <view class="dingbudebox">
			<image @click="fanhiskan" class="dingbudefanhui" src="https://dfgq3654.laidianbanlv.cn/images/duanju/baisefanhui.png" mode=""></image>
			<view class="dingbijiji">
				第{{kanji}}集
			</view>

		</view> -->

		<xiaoVideoComponent :autoplay="true" :poster="xiangqinginfgo.detail.cover" :src="judizhi"></xiaoVideoComponent>

		<view class="daxiaheihe">

			<!-- <view class="xiafhiuibox"> -->
			<view class="fibubxox123">
				<image @click="fanhiskan" class="xiamiandefanhui"
					src="https://dfgq3654.laidianbanlv.cn/images/duanju/baisefanhui.png" mode=""></image>
			</view>

			<view @click="xuanji" class="fibubxox">
				<view class="jiantoudebox">
					第{{kanji}}集-共{{xiangqinginfgo.detail.episode}}集-<text>已完结</text>
					<image src="https://dfgq3654.laidianbanlv.cn/images/duanju/shangjiantoudede.png" mode=""></image>
				</view>
			</view>
		</view>



		<view class="">
			<u-popup closeable="true" border-radius="14" mode="bottom" v-model="showasdsaf">
				<view class="juingname">
					{{xiangqinginfgo.detail.title}}
				</view>
				<view class="tanchudepop">
					<view class="tanlefy">
						<image :src="xiangqinginfgo.detail.cover" mode=""></image>
					</view>
					<view class="tandeyou">

						<view class="jianjie">
							<scroll-view show-scrollbar="true" style="height: 125px;" scroll-y="true">
								简介:{{xiangqinginfgo.detail.introduce}}
							</scroll-view>
						</view>
						<view class="gonguosji">
							共{{xiangqinginfgo.detail.episode}}集
						</view>
					</view>

				</view>
				<view class="xuanjidebox">
					<view @click="xuandecili(index)" v-for="(item,index) in xiangqinginfgo.items" :key="index"
						:class="index==xuanjige?'xuanzhongxuadeji':'xuadeji'">
						{{item.name}}
					</view>
				</view>

				<view class="jishubox">

					<view class="jishubox">
						<view @click="dianjile(item.id,item.number,item.lock,item)"
							v-for="(item,index) in xiangqinginfgo.items[xuanjige].lists" :key="index">

							<view v-if="item.lock==0" :class="kanji==item.number?'notbusupjiutisde':'busuojiutisde'">
								{{item.number}}
							</view>
							<view v-if="item.lock==1" :class="kanji==item.number?'notjiutisde':'jiutisde'">
								<view class="suozihe">
									<image class="baisuozi"
										src="https://dfgq3654.laidianbanlv.cn/images/duanju/baisuozi.png" mode="">
									</image>
								</view>

								<text>
									{{item.number}}
								</text>
							</view>


						</view>
					</view>


				</view>

				<view class="zhanweri">

				</view>


			</u-popup>
		</view>


		<u-popup closeable="true" border-radius="14" mode="bottom" v-model="zhifutna">
			<view class="wchonzhibxo">
				<view class="jiesuote">
					解锁特权
				</view>
				<view class="kauiuqumaidou">
					<view @click="xuanmaisha(index,item)" v-for="(item,index) in xiangqinginfgo.lock_items" :key="index"
						:class="index==maihsaindex?'maidouhezixuan':'maidouhezi'">
						<view class="jikauiq">
							￥{{item.price}}
						</view>
						<view class="maiduoshao">
							{{item.desc}}
						</view>
					</view>
				</view>
				<view class="dibuzhan">
				</view>
				<view class="maitishi">
					<view class="mashuomiong">
						充值说明:
					</view>
					<view class="mashuomiong">
						1.虚拟产品，一经购买不可退换
					</view>
					<view class="mashuomiong">
						2.末满18周岁的未成年人，应在父母或其他监护人的监护、指导、同意下进行付费等相关操作
					</view>
				</view>
				<view @click="quzhifulioe" class="quzhif">
					去支付
				</view>
				<view class="dibuzhan">

				</view>
			</view>
		</u-popup>

		<u-popup closeable="true" border-radius="14" mode="center" v-model="fuqiandepop">
			<view class="zhifudepop">
				<view class="jiesuomaimai">
					您确定支付<text class="juxiadetiex">￥{{maideshnox.price}}{{maideshnox.desc}}</text>特权吗？
				</view>
				<view @click="quediongzifu" id="queansty">
					确定

				</view>



			</view>
		</u-popup>


	</view>
</template>

<script>
	import request from '../../utils/request.js';
	import xiaoVideoComponent from '../../utils/components/x-video/x-video.vue';
	import api from '../../utils/url.js';
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				xuanjige: 0,
				maihsaindex: 0,
				screenHeight: "",
				fuqiandepop: false,
				showasdsaf: false,
				zhifutna: false,
				jishu: ["1-20", "1-20", "1-20", "1-20", "1-20", "1-20", "1-20", "1-20"],

				id: "",
				item_id: "",
				xiangqinginfgo: "",
				judizhi: "",
				kanji: 1,
				diandijiji: 1,
				maideshnox: "",
			}
		},
		computed: {
			...mapState({

			})
		},
		components: {
			xiaoVideoComponent
		},
		onLoad(e) {
			var that = this
			that.id = e.id
			
			console.log(e)

			// that.hujiexi()
			that.huoquxiangqing(e.id, true)

			uni.getSystemInfo({
				success(res) {
					that.screenHeight = res.windowHeight - 100 + "px"
				}
			})

		},
		onShow() {


		},
		onPageScroll: function(e) {
			// console.log("滚动距离为：" + e.scrollTop);
		},
		onReachBottom() {
			// console.log('触底');

		},
		methods: {
			fanhiskan() {
				uni.navigateBack({
					delta: 1
				})
			},
			geilishi() {
				var that = this
				let data = {
					playlet_list_id: this.id,
					playlet_list_item_id: this.item_id,
				}
				request(api.history_store, 'POST', data)
					.then(response => {
						console.log('history_store数据--:', response.data);

						that.hujiexi(this.item_id)
						if (response.code == "200") {


						} else {
							// uni.showToast({
							// 	title: response.msg,
							// 	icon: "none"
							// })
						}
					})
			},
			quediongzifu() {
				// fuqiandepop: false,
				// showasdsaf: false,
				// zhifutna: false,
				var that = this

				this.fuqiandepop = false
				this.showasdsaf = false
				this.zhifutna = false

				let data = {
					type: this.maideshnox.type,
					playlet_list_id: this.id,
					playlet_list_item_id: this.item_id,
				}
				request(api.playletunlock, 'POST', data)
					.then(response => {
						console.log('playletunlock数据--:', response.data);


						
						that.kanji = that.diandijiji

						// return false

						that.hujiexi(this.item_id)
						that.huoquxiangqing(this.id, false)
						if (response.code == "200") {




						} else {
							// uni.showToast({
							// 	title: response.msg,
							// 	icon: "none"
							// })
						}
					})


			},
			xuanmaisha(i, item) {
				this.maihsaindex = i
				this.maideshnox = item
			},
			quzhifulioe() {
				this.fuqiandepop = true

				// this.fuqiandepop = false
				this.showasdsaf = false
				this.zhifutna = false
			},
			xuandecili(i) {
				this.xuanjige = i
			},
			xuanji() {
				this.showasdsaf = true
			},
			huoquxiangqing(id, isshua) {
				let data = {
					id: id,
				}
				request(api.playletdetail, 'GET', data)
					.then(response => {
						console.log('playletlists数据--:', response.data);
						if (response.code == "200") {
							this.xiangqinginfgo = response.data
							uni.setNavigationBarTitle({
								title: response.data.detail.title

							})
							console.log('item_id**:', this.xiangqinginfgo.lock_items[0]);
							this.item_id = this.xiangqinginfgo.items[0].lists[0].id

							this.maideshnox = this.xiangqinginfgo.lock_items[0]

							// var duanjilenbth= response.data.items.length

							// for(){}

							if (isshua != false) {
								this.hujiexi(this.item_id)
								this.geilishi(this.item_id)
							}




						} else {
							uni.showToast({
								title: response.msg,
								icon: "none"
							})
						}
					})
					.catch(response => {
						uni.hideLoading()
					})

			},
			dianjile(id, number, lock,item) {
				this.item_id = id
				// this.kanji = number
				this.diandijiji = number

				console.log(id, number, lock,item)
				if (lock == 1) {
					this.zhifutna = true
				} else {
					this.hujiexi(id)
					this.item_id = id
					this.kanji = number
				}

			},
			hujiexi(id) {
				let data = {
					id: this.id,
					item_id: id
				}
				request(api.playletplay, 'GET', data)
					.then(response => {
						console.log('playletlists数据:', response.data);
						if (response.code == "200") {
							// this.kanjuingo = this.kanjuingo.concat(response.data.data)
							this.judizhi = response.data.url

							// fuqiandepop: false,
							// showasdsaf: false,
							// zhifutna: false,
							this.fuqiandepop = false
							this.showasdsaf = false
							this.zhifutna = false




							// this.showasdsaf = false
						} else {
							uni.showToast({
								title: response.msg,
								icon: "none"
							})
						}
					})
					.catch(response => {
						uni.hideLoading()
					})

			},


		}
	}
</script>

<style lang="scss">
	page {
		background-color: #000;
	}

	.bosss {
		width: 100%;
		height: 100%;
		background-color: #000;
	}

	.visty {
		width: 100%;
		background-color: #000;
		// padding-bottom: 40rpx;
		// height: 800rpx;
	}

	.fibubxox {
		width: 420rpx;
		height: 40px;
		position: fixed;
		bottom: 60rpx;
		// color: black;
		color: #fff;
		left: 18%;
		border-radius: 20rpx;
		// background-color: white;
		background-color: #343434;
		text-align: center;
		line-height: 40px;
		margin-left: 40rpx;
		margin-top: 10rpx;
		z-index: 9999;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		// display: flex;
		// flex-flow: row;
		// justify-content: left;
		// align-items: center;
	}

	.fibubxox123 {
		width: 40px;
		height: 40px;
		position: fixed;
		bottom: 60rpx;
		// color: black;
		color: #fff;
		left: 2%;
		border-radius: 20rpx;
		// background-color: white;
		background-color: #343434;
		text-align: center;
		line-height: 40px;
		margin-left: 40rpx;
		margin-top: 10rpx;
		z-index: 9999;
	}

	.xiafhiuibox {
		width: 70rpx;
		height: 70rpx;
		// border: 1px solid red;
		background-color: #343434;
		border-radius: 15rpx;
		// position: relative;
		margin-left: 50rpx;
		// margin-top: 55rpx;

		display: flex;
		align-items: center;
		justify-content: center;

		position: fixed;
		bottom: 60rpx;
		color: #fff;
		left: 2%;

	}

	.xiamiandefanhui {
		width: 40rpx;
		height: 40rpx;
		margin: 0rpx auto;
		margin-top: 15rpx;


	}

	.tanchudepop {
		width: 100%;
		display: flex;
		flex-flow: row;
		justify-content: left;
		align-items: center;
	}

	.tanlefy {
		width: 35%;
	}

	.tanlefy image {
		width: 200rpx;
		height: 300rpx;
		margin-left: 40rpx;
		margin-top: 40rpx;
		border-radius: 30rpx;
	}

	.juingname {
		font-weight: bold;
		margin-left: 20rpx;
		text-align: center;
		margin-top: 40rpx;
	}

	.jianjie {
		font-weight: normal;
		padding: 20rpx 0;
		width: 90%;
		margin-left: 5%;
	}

	.gonguosji {
		margin-left: 20rpx;
	}

	.xuanjidebox {
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		justify-content: left;
		align-items: center;
	}

	.jishubox {
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		justify-content: left;
		align-items: center;
		margin-top: 20rpx;
		background-color: #fff;
	}

	.jishuboxdade {
		width: 100%;
		background-color: #000;
	}

	.xuadeji {
		width: 16%;
		text-align: center;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	.xuanzhongxuadeji {
		width: 16%;
		color: #CEB177;
		text-align: center;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	.jiutisde {
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		// border: 1px solid #000;
		border-radius: 10rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		background-color: #F7F7F7;
	}

	.busuojiutisde {
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		// border: 1px solid #000;
		border-radius: 10rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
		background-color: #F7F7F7;
	}

	.notbusupjiutisde {
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #fff;
		background-color: #D5AD7C;
		border-radius: 10rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	.suozihe {
		width: 30rpx;
		height: 30rpx;
		background-color: #CEB177;
		position: absolute;
		margin-left: 67rpx;
		display: flex;
		border-radius: 0 5rpx 0 5rpx;
	}

	.baisuozi {
		width: 20rpx;
		height: 20rpx;

		// border: 1px solid red;
		margin-top: 5rpx;
		margin-left: 8rpx;

	}

	.notjiutisde {
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #fff;
		background-color: #D5AD7C;
		border-radius: 10rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}



	.zhanweri {
		width: 100%;
		height: 80rpx;
	}

	.huadongbox {
		width: 100%;
		height: 120rpx;
	}

	.jiantoudebox {
		width: 100%;
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: center;
		// margin-top: -20rpx;
	}

	.jiantoudebox image {
		width: 40rpx;
		height: 40rpx;
		margin-left: 40rpx;
	}

	.daxiaheihe {
		width: 100%;
		height: 100px;
		// padding-top: 40rpx;
		background-color: #000;
		// margin-top: -10rpx;


		// display: flex;
		// flex-flow: row wrap;
		// justify-content: left;
		// align-items: center;
	}

	.wchonzhibxo {
		width: 94%;
		margin-left: 3%;
		margin-top: 20rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.jiesuote {
			display: inline-block;
			text-align: center;
			margin: 20rpx auto;
			width: 100%;
		}

		.wodeyue {
			font-size: 32rpx;
			font-weight: bold;
		}

		.benixu {
			font-size: 28rpx;
			margin-top: 20rpx;
			// font-weight: bold;
		}

		.kauiuqumaidou {
			width: 100%;
			display: flex;
			flex-flow: row wrap;
			justify-content: left;
			align-items: center;

		}

		.maidouhezixuan {
			width: 40%;
			height: 160rpx;
			background-color: #FFEBD8;
			border-radius: 20rpx;
			margin-left: 7%;
			margin-top: 40rpx;
			border: 2px solid #D5AD7C;

			.jikauiq {
				margin-top: 20rpx;
				margin-left: 20rpx;
				font-weight: bold;
				font-size: 32rpx;

			}

			.maiduoshao {
				margin-top: 20rpx;
				margin-left: 20rpx;
				font-weight: bold;
			}

			.maitishi {
				width: 100%;
				padding: 20rpx 0;

				.mashuomiong {
					padding: 20rpx 0;
				}
			}
		}

		.maidouhezi {
			width: 40%;
			height: 160rpx;
			background-color: #FFEBD8;
			border: 2px solid #fff;
			border-radius: 20rpx;
			margin-left: 7%;
			margin-top: 40rpx;

			.jikauiq {
				margin-top: 20rpx;
				margin-left: 20rpx;
				font-weight: bold;
				font-size: 32rpx;

			}

			.maiduoshao {
				margin-top: 20rpx;
				margin-left: 20rpx;
				font-weight: bold;
			}

			.maitishi {
				width: 100%;
				padding: 20rpx 0;

				.mashuomiong {
					padding: 20rpx 0;
				}
			}
		}
	}

	.dibuzhan {
		width: 100%;
		height: 40rpx;
	}

	.quzhif {
		width: 300rpx;
		height: 80rpx;
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #D5AD7C;
		color: white;
		display: flex;
		margin: 40rpx auto;
		justify-content: center;
	}

	.zhifudepop {
		width: 400rpx;
		height: 300rpx;

		#queansty {
			width: 260rpx;
			height: 80rpx;
			font-weight: bold;
			font-size: 32rpx;
			text-align: center;
			background-color: #D5AD7C;
			border-radius: 40rpx;
			// display: flex;
			margin-top: 120rpx;
			color: white;
			line-height: 80rpx;
			margin-left: 80rpx;
			// justify-content: center;
		}

		.quedetrxwe {
			color: red;
			// width: 160rpx;
			// height: 80rpx;
			// font-weight: bold;
			// font-size: 32rpx;
			// text-align: center;
			// background-color: #D5AD7C;
			// border-radius: 30rpx;
			// display: inline-block;
			// margin-top: 40rpx auto;
		}

		.jiesuomaimai {
			width: 90%;
			margin-left: 5%;
			margin-top: 80rpx;
			font-size: 32rpx;

			.juxiadetiex {
				font-weight: bold;
				color: #D5AD7C;
			}


		}
	}

	.tandehang {
		height: 500rpx;
	}

	.dingbudebox {
		width: 100%;
		height: 80rpx;
		display: flex;
		flex-flow: row;
		justify-content: left;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 9999;

		.dingbudefanhui {
			width: 40rpx;
			height: 40rpx;
			margin-left: 40rpx;
		}

		.dingbijiji {
			color: white;
			margin-left: 20rpx;
		}
	}
</style>